<script>
import { cloneDeep, showToast, valIsEmpty } from "@/utils"
import rightIcon from "./assets/right.svg"

export default {
  name: "index",
  props: {
    pickerOptionListProps: {
      type: Array,
      default() {
        return []
      },
    },
    pickerValueKey: {
      type: String,
      default: "value",
    },
    pickerLabelKey: {
      type: String,
      default: "label",
    },
    value: {
      type: Array,
      default: [],
    },
    title: {
      type: String,
      default: "",
    },
    //是否允许自填
    allowFill: {
      type: Boolean,
      default: false,
    },
    //在没有选中的情况下是否允许点确定
    required: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    valIsEmpty,
    open() {
      // 数据回显
      if (this.value && this.value.length > 0) {
        for (let valueElement of this.value) {
          for (let pickerOptionListElement of this.pickerOptionList) {
            if (pickerOptionListElement[this.pickerValueKey] === valueElement) {
              pickerOptionListElement.selected = true
              break
            }
          }
        }
      } else {
				this.pickerOptionList.forEach((item) => {
					item.selected = false
				})
			}
      this.$refs.popup.open()
    },
    select(item, index) {
      this.pickerOptionList[index].selected = !item.selected
      this.$forceUpdate()
    },
    confirm() {
      if (this.required && this.value.length === 0) {
        showToast.default("请选择至少一项")
        return
      }
      const value = this.pickerOptionList.filter((item) => item.selected).map((item) => item[this.pickerValueKey])
      // 处理用户自填的资料
      if (this.allowFill && this.otherPickerItemSelected && this.otherInputValue) {
        value.push(this.otherInputValue)
      }
      this.$emit("input", value)
      this.$refs.popup.close()
    },
  },
  data() {
    return {
      searchInputContent: "", // 搜索框内容
      otherInputValue: "", // 自填输入框内容
      otherPickerItemSelected: false, // 自填选项是否被选中
      pickerOptionList: [], // 选项列表
      rightIcon,
    }
  },
  watch: {
    pickerOptionListProps: {
      handler(val) {
        this.pickerOptionList = val.map((item) => {
          return {
            ...item,
            selected: false,
          }
        })
      },
      immediate: true,
    },
  },
  emits: ["input"],
}
</script>

<template>
  <uni-popup ref="popup" type="bottom">
    <view class="popup-container">
      <view class="header">
				<view class="placeholder"></view>
        <view class="title">{{ title }}</view>
        <view class="confirm-btn" @click="confirm">确定</view>
      </view>
      <!--			选项内容-->
      <view class="picker-container">
        <block v-for="(item, index) in pickerOptionList" :key="item[pickerValueKey]">
          <view class="picker-item" @click="() => select(item, index)">
            <view class="checkbox" :class="{ selected: item.selected }">
              <image class="icon" :src="rightIcon"></image>
            </view>
            <text>{{ item[pickerLabelKey] }}</text>
          </view>
          <view class="divide-line"></view>
        </block>
        <!--				自填-->
        <view class="picker-item-other" v-if="allowFill">
          <view class="checkbox" :class="{ selected: otherPickerItemSelected }" @click="otherPickerItemSelected = !otherPickerItemSelected">
            <image class="icon" :src="rightIcon"></image>
          </view>
          <view class="content">
            <text>其他（可自定义填写）</text>
            <view class="input-container">
              <input
                v-model="otherInputValue"
                placeholder="在此自定义填写你想要的资料"
                @input="() => !otherPickerItemSelected && (otherPickerItemSelected = true)"
              />
            </view>
          </view>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
.popup-container {
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  background: white;
  padding-bottom: 30rpx;

  > .header {
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    > .title {
      color: var(--text-color);
      font-size: 32rpx;
      text-align: center;
      width: 0;
      flex: 1;
    }

    > .confirm-btn {
      background: var(--theme-color);
      height: 70rpx;
      padding: 0 30rpx;
      border-radius: 35rpx;
      display: flex;
      align-items: center;
      color: var(--text-color-white);
      font-size: 30rpx;
    }

    .placeholder {
      width: 120rpx;
    }
  }

  .picker-container {
    max-height: 60vh;
    overflow: auto;
    padding: 30rpx 0;

    .checkbox {
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      border: 2rpx solid var(--border-color);
      margin-right: 20rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      > .icon {
        display: none;
      }
      &.selected {
        background: var(--theme-color);
        border-color: var(--theme-color);
        > .icon {
          display: block;
          width: 40rpx;
          height: 40rpx;
        }
      }
    }

    .picker-item {
      padding: 30rpx;
      display: flex;
      align-items: center;
			font-size: 30rpx;
      &:active {
        background: var(--theme-color-light);
      }
    }

    .picker-item-other {
      padding: 30rpx;
      display: flex;
      align-items: center;
      width: 100%;
			font-size: 30rpx;
      > .content {
        width: 0;
        flex: 1;
        > .input-container {
          margin-top: 20rpx;
          border: 2rpx solid var(--border-color);
          padding: 10rpx 20rpx;
          font-size: 30rpx;
          width: 100%;
          > input {
            width: 100%;
          }
        }
      }
    }

    .divide-line {
      margin: 0 30rpx;
      height: 2rpx;
      background: var(--border-color);
    }
  }
}
</style>
